<template>
	<view class="app-container">
		<view class="logo">
			<text class="text">欢迎登录</text>
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
				<u-form-item prop="phone" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.phone" @blur="blurPhone" @focus="focusPhone"
						:class="pFocus?'input-focus':'input'" color="#fff" placeholder="请输入手机号"
						placeholderClass="blur-text" border="bottom">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.phone" @blur="blurPhone" :class="pFocus?'input-focus':'input'"
							@focus="focusPhone" placeholder="请输入手机号" placeholderClass="blur-text" border="bottom">
							<!-- #endif -->
							<u-icon class="icon-phone" size="24" :color="pFocus?'#01e7e9':'#077377'" name="account-fill"
								slot="prefix">
							</u-icon>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="password" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input v-show="showPassword" placeholderClass="blur-text" border="bottom" v-model="form.password" color="#fff"
						type="password" @blur="blurPhone" @focus="focusPWd"
						:class="pwFocus?'input-focus':'input'" placeholder="请输入密码" :focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-show="showPassword" @blur="blurPWD" @focus="focusPWd" :class="pwFocus?'input-focus':'input'"
							placeholderClass="blur-text" border="bottom" v-model="form.password"
							type="password" color="#fff" class="input" placeholder="请输入密码" :focus="focus">
							<!-- #endif -->
							<u-icon class="icon-phone" size="24" color="#077377" name="lock-fill" slot="prefix">
							</u-icon>
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input v-show="!showPassword" placeholderClass="blur-text" border="bottom" v-model="form.password" color="#fff"
						type="text" @blur="blurPhone" @focus="focusPWd"
						:class="pwFocus?'input-focus':'input'" placeholder="请输入密码" :focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-show="!showPassword" @blur="blurPWD" @focus="focusPWd" :class="pwFocus?'input-focus':'input'"
							placeholderClass="blur-text" border="bottom" v-model="form.password"
							type="text" color="#fff" class="input" placeholder="请输入密码" :focus="focus">
							<!-- #endif -->
							<u-icon class="icon-phone" size="24" color="#077377" name="lock-fill" slot="prefix">
							</u-icon>
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="name" ref="item" class="form-item">
					<view class="text">
						<navigator url="/pages/registered/registered"><text>还没有账号？注册一个</text></navigator>
						<navigator url="/pages/forgotPwd/forgotPwd"><text>忘记密码?</text></navigator>
					</view>
				</u-form-item>
				<u-form-item prop="name" ref="item" class="form-item">
					<button :loading="loading" class="login-btn" @click="handleLogin">登 录</button>
				</u-form-item>
			</u--form>
		</view>
		<view class="agree">
			<u-checkbox-group @change="changeCheck">
				<u-checkbox v-model="checked" activeColor="#02ddde" shape="circle">
				</u-checkbox>
			</u-checkbox-group>
			<view class="label-txt">
				我已阅读并同意
				<navigator url="/pages/userAgree/userAgree">
					<text class="text-line">用户协议</text>
				</navigator>
				和
				<navigator url="/pages/privacy/privacy">
					<text class="text-line">隐私协议</text>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: "",
					password: ""
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				showPassword: true,
				focus: false,
				loading: false,
				pFocus: false,
				pwFocus: false,
				checked: false
			}
		},
		methods: {
			changeCheck() {
				this.checked = !this.checked
			},
			focusPhone() {
				this.pFocus = true;
			},
			blurPhone() {
				this.pFocus = false
			},
			focusPWd() {
				this.pwFocus = true;
			},
			blurPWD() {
				this.pwFocus = false
			},
			showPwd() {
				this.showPassword = !this.showPassword;
				this.focus = true;
				this.$nextTick(() =>{
					this.$refs.form.clearValidate()
				})
			},
			handleLogin() {
				this.$refs.form.validate().then(res => {
					// 校验通过
					let isCheck = this.checkedAgree();
					if(!isCheck) return
					this.loading = true
					this.$store.dispatch('user/login', this.form).then(res => {
						this.loading = false;
						// console.log(res);
						this.$store.dispatch('user/getInfo').then(res => {
							uni.setStorageSync("inviteCode", res.inviteCode)
						})
						uni.switchTab({
							url: "/pages/home/home"
						})
					}).catch((res) => {
						this.loading = false;
					})
				}).catch(errors => {
					// uni.$u.toast('请输入用户名或密码')
				})
			},
			checkedAgree(){
				if (this.checked) {
					return true
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私协议',
						icon: "none",
						duration: 2000
					});
					return false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: url("@/static/image/logo_bg.png") no-repeat;
		background-size: 100% 100%;
	}

	@font-face {
		font-family: SourceHanSansCN-Normal;
		src: url("@/static/SourceHanSansCN-Normal.otf");
	}

	* {
		box-sizing: border-box;
	}

	.app-container {
		// padding-top: 50px;
	}

	.logo {
		width: 100%;
		padding: 100px 40px 20px;
		// outline: 1px solid red;

		.text {
			color: #02ddde;
			font-size: 38px;
			font-weight: bold;
			font-family: SourceHanSansCN-Normal;
			letter-spacing: 4px;
			// position: relative;
		}
	}


	.form {
		padding: 30px 25px 0;
	}

	.form-item {

		.input {
			border-bottom-color: #077377 !important;

			.blur-text {
				color: #077377 !important;
			}

			.icon-phone {
				font-size: 24px;
				padding-right: 10px;
				margin-right: 10px;
				border-right: 1rpx solid #077377;
			}
		}

		.input-focus {
			border-bottom-color: #01e7e9 !important;

			.blur-text {
				color: #01e7e9 !important;
			}

			.icon-phone {
				font-size: 24px;
				padding-right: 10px;
				margin-right: 10px;
				border-right: 1rpx solid #01e7e9;
			}
		}

		.text {
			color: #5fe5ed;
			font-weight: 600;
			letter-spacing: 2px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.login-btn {
			width: 100%;
			color: #5fe5ed;
			font-family: SourceHanSansCN-Normal;
			background-color: transparent;
			border: 2px solid #5fe5ed;
		}
	}

	.agree {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		color: #02ddde;

		.label-txt {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text-line {
			text-decoration: underline;
			// border-bottom: 1rpx solid #02ddde
		}
	}
</style>
